/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 *
 */

import React, { PureComponent } from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';
import './PlieCharts.scss';
const data = [
  {
    name: '农林牧渔业',
    经营风险: 4000,
    公开公示: 3400,
    监管风险: 4400,
    行政风险: 2400,
    司法风险: 1400,
    公司风险: 400
  },
  {
    name: '采矿业',
    经营风险: 4000,
    公开公示: 2400,
    监管风险: 4400,
    行政风险: 1400,
    司法风险: 1400,
    公司风险: 400
  },
  {
    name: '制造业',
    经营风险: 4000,
    公开公示: 3400,
    监管风险: 4400,
    行政风险: 3400,
    司法风险: 4400,
    公司风险: 400
  },
  {
    name: '建筑业',
    经营风险: 4000,
    公开公示: 2400,
    监管风险: 4400,
    行政风险: 2400,
    司法风险: 2400,
    公司风险: 400
  },
  {
    name: '批发和零售',
    经营风险: 4000,
    公开公示: 1400,
    监管风险: 4400,
    行政风险: 3400,
    司法风险: 1400,
    公司风险: 400
  },
  {
    name: '金融业',
    经营风险: 4000,
    公开公示: 3400,
    监管风险: 4400,
    行政风险: 2400,
    司法风险: 1400,
    公司风险: 1400
  },
  {
    name: '电力、热气、燃气...',
    经营风险: 5000,
    公开公示: 3400,
    监管风险: 4400,
    行政风险: 2400,
    司法风险: 1400,
    公司风险: 400
  }
];

export default class Example extends PureComponent {
  render() {
    return (
      <div className="PileChartsContainer">
        <span className="PileChartsContainerTitle">各风险行业分布情况</span>
        <BarChart
          width={757}
          height={353}
          data={data}
          barSize={24}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5
          }}
        >
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend
            verticalAlign="top"
            margin={{
              top: 20,
              right: 30,
              left: 20,
              bottom: 5
            }}
            height={50}
            width={300}
            align={'right'}
          />
          <Bar dataKey="经营风险" stackId="a" fill="hsla(88, 92%, 24%, 1)" />
          <Bar dataKey="公开公示" stackId="a" fill="hsla(36, 100%, 50%, 1)" />
          <Bar dataKey="监管风险" stackId="a" fill="rgba(144,19,254,1)" />
          <Bar dataKey="行政风险" stackId="a" fill="rgba(255,0,0,1)" />
          <Bar dataKey="司法风险" stackId="a" fill="rgba(24,144,255,1)" />
          <Bar dataKey="公司风险" stackId="a" fill="rgba(80,227,194,1)" />
        </BarChart>
      </div>
    );
  }
}
